<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
			body {
			  margin: 0;
			  padding: 0;
			  background: black;
			}
			
			.ken-burns-slideshow {
			  position: absolute;
			  top: 0;
			  left: 0;
			  z-index: -2;
			  margin: 0;
			  padding: 0;
			  width: 100%;
			  height: 100%;
			  overflow: hidden;
			  list-style-type: none;
			}
			.ken-burns-slideshow .slide {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  background-size: cover;
			  background-position: center;
			  opacity: 0;
			  transform: scale(1.2);
			  animation: kenburns 24s linear infinite;
			}
			.ken-burns-slideshow .slide:nth-child(1) {
			  animation-delay: 0s;
			}
			.ken-burns-slideshow .slide:nth-child(2) {
			  animation-delay: 6s;
			}
			.ken-burns-slideshow .slide:nth-child(3) {
			  animation-delay: 12s;
			}
			.ken-burns-slideshow .slide:nth-child(4) {
			  animation-delay: 18s;
			}
			
			#slide1 {
			  background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url("https://images.unsplash.com/photo-1578879279270-f1a166ab29f8?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
			}
			
			#slide2 {
			  background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
			}
			
			#slide3 {
			  background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url("https://images.unsplash.com/photo-1435575653489-b0873ec954e2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
			}
			
			#slide4 {
			  background-image: linear-gradient(rgba(16, 16, 16, 0.8), rgba(16, 16, 16, 0.8)), url("https://images.unsplash.com/photo-1462396240927-52058a6a84ec?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
			}
			
			@keyframes kenburns {
			  10% {
			    opacity: 1;
			  }
			  25% {
			    opacity: 1;
			    transform: scale(1);
			  }
			  40% {
			    opacity: 0;
			    transform: scale(1);
			  }
			}
			section {
			  display: grid;
			  place-items: center;
			  height: 100vh;
			  color: white;
			}
			section h1 {
			  font-size: 250%;
			  text-shadow: 0 2px 2px black;
			}
		</style>
	</head>
	<body>
		<main>
		  <ul class="ken-burns-slideshow">
		    <li class="slide" id="slide1"></li>
		    <li class="slide" id="slide2"></li>
		    <li class="slide" id="slide3"></li>
		    <li class="slide" id="slide4"></li>
		  </ul>
		  <section>
		    <h1>Pure CSS Ken Burns Effect</h1>
		  </section>
		</main>
	</body>
</html>
